<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <!-- Logo 和标题 -->
      <div class="text-center">
        <img class="mx-auto h-16 w-16" src="/vite.svg" alt="Logo">
        <h2 class="mt-6 text-3xl font-bold text-gray-900">
          {{ loginType === 'admin' ? '管理员登录' : '学生登录' }}
        </h2>
        <p class="mt-2 text-sm text-gray-600">
          新生报到服务平台{{ loginType === 'admin' ? '管理系统' : '' }}
        </p>
        
        <!-- 端口切换 -->
        <div class="mt-4 flex justify-center">
          <div class="bg-gray-100 p-1 rounded-lg">
            <button
              @click="switchLoginType('student')"
              :class="[
                'px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200',
                loginType === 'student' 
                  ? 'bg-blue-500 text-white shadow-sm' 
                  : 'text-gray-600 hover:text-gray-900'
              ]"
            >
              学生端
            </button>
            <button
              @click="switchLoginType('admin')"
              :class="[
                'px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200',
                loginType === 'admin' 
                  ? 'bg-blue-500 text-white shadow-sm' 
                  : 'text-gray-600 hover:text-gray-900'
              ]"
            >
              管理端
            </button>
          </div>
        </div>
      </div>

      <!-- 登录表单 -->
      <div class="card">
        <form class="space-y-6" @submit.prevent="handleLogin">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700">
              用户名
            </label>
            <div class="mt-1">
              <input
                id="username"
                v-model="form.username"
                name="username"
                type="text"
                required
                class="input"
                placeholder="请输入用户名"
                :disabled="loading"
              >
            </div>
            <p v-if="errors.username" class="mt-1 text-sm text-red-600">
              {{ errors.username }}
            </p>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700">
              密码
            </label>
            <div class="mt-1 relative">
              <input
                id="password"
                v-model="form.password"
                name="password"
                :type="showPassword ? 'text' : 'password'"
                required
                class="input pr-10"
                placeholder="请输入密码"
                :disabled="loading"
              >
              <button
                type="button"
                class="absolute inset-y-0 right-0 pr-3 flex items-center"
                @click="showPassword = !showPassword"
              >
                <EyeIcon v-if="!showPassword" class="h-5 w-5 text-gray-400" />
                <EyeSlashIcon v-else class="h-5 w-5 text-gray-400" />
              </button>
            </div>
            <p v-if="errors.password" class="mt-1 text-sm text-red-600">
              {{ errors.password }}
            </p>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                id="remember-me"
                v-model="form.remember"
                name="remember-me"
                type="checkbox"
                class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
              >
              <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                记住我
              </label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-blue-500 hover:text-blue-600">
                忘记密码？
              </a>
            </div>
          </div>

          <!-- 错误提示 -->
          <div v-if="errorMessage" class="rounded-md bg-red-50 p-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <XCircleIcon class="h-5 w-5 text-red-400" />
              </div>
              <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">
                  登录失败
                </h3>
                <div class="mt-2 text-sm text-red-700">
                  {{ errorMessage }}
                </div>
              </div>
            </div>
          </div>

          <div>
            <button
              type="submit"
              :disabled="loading"
              class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
            >
              <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                <LockClosedIcon class="h-5 w-5 text-blue-200 group-hover:text-blue-200" />
              </span>
              <span v-if="loading" class="flex items-center">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                登录中...
              </span>
              <span v-else>登录</span>
            </button>
          </div>
        </form>

        <!-- 快速登录提示 -->
        <div class="mt-6 p-4 bg-blue-50 rounded-lg">
          <h4 class="text-sm font-medium text-blue-800 mb-2">测试账号</h4>
          <div class="text-xs text-blue-700 space-y-1">
            <p>用户名: admin</p>
            <p>密码: 123456</p>
          </div>
        </div>
      </div>

      <!-- 底部链接 -->
      <div class="text-center">
        <p class="text-sm text-gray-600">
          学生登录请访问
          <router-link to="/student/login" class="font-medium text-blue-500 hover:text-blue-600">
            学生端
          </router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores'
import {
  EyeIcon,
  EyeSlashIcon,
  LockClosedIcon,
  XCircleIcon
} from '@heroicons/vue/24/outline'

const router = useRouter()
const authStore = useAuthStore()

// 登录类型
const loginType = ref('admin')

// 切换登录类型
const switchLoginType = (type) => {
  loginType.value = type
  if (type === 'student') {
    router.push('/student/login')
  }
}

// 表单数据
const form = reactive({
  username: '',
  password: '',
  remember: false
})

// 表单验证错误
const errors = reactive({
  username: '',
  password: ''
})

// 状态
const loading = ref(false)
const showPassword = ref(false)
const errorMessage = ref('')

// 表单验证
const validateForm = () => {
  errors.username = ''
  errors.password = ''
  
  if (!form.username.trim()) {
    errors.username = '请输入用户名'
    return false
  }
  
  if (!form.password.trim()) {
    errors.password = '请输入密码'
    return false
  }
  
  if (form.password.length < 6) {
    errors.password = '密码长度不能少于6位'
    return false
  }
  
  return true
}

// 处理登录
const handleLogin = async () => {
  if (!validateForm()) {
    return
  }
  
  loading.value = true
  errorMessage.value = ''
  
  try {
    const result = await authStore.login({
      username: form.username,
      password: form.password,
      remember: form.remember
    }, 'admin')
    
    if (result.success) {
      // 登录成功，跳转到管理首页
      router.push('/admin/dashboard')
    } else {
      errorMessage.value = result.message || '登录失败，请检查用户名和密码'
    }
  } catch (error) {
    console.error('Login error:', error)
    errorMessage.value = '登录失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>